import React from 'react';
import {Table, Button, Card, Form, Input, Popconfirm, Select} from 'antd';
import ReportService from '../../service/ReportService';
const Option = Select.Option;
export default class ReportList extends React.Component {

    state = {
        title:'Report列表',
        data: [],
        pagination: {pageSize: 10, current: 1,size:'middle'},
        pagStart: {pageSize: 10, current: 1,size:'middle'},
        search: '',
        //列表加载
        tableLoading: false,
        departmentList : [],//下拉框查询数据
        searchParam : {},
        tableList:[],
        loading:false,
        typeList:{NEWS:'新闻',COMMENT:'新闻评论',TOPIC:'话题',TOPIC_COMMENT:'话题评论'}
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.fetch(this.state.pagination);
    }

    //查询方法
    fetch(pagination) {
        console.log('pagination.......',pagination);
        this.setState({
            loading: true,
        });
        let pager = {
            query: this.state.search,
            page: pagination.current - 1,
            size: pagination.pageSize,
            current: pagination.current,
            //sort:['receiptDate', 'DESC']
        };
        console.log('pager.......',pager);
        ReportService.getList(pager).done(data=>{
            console.log('data',data.entity);
            if (data.entity) {
                this.setState({
                    tableList: data.entity,
                    loading: false,
                    pagination: {
                        total: parseInt(data.headers['X-Total-Count']),
                        pageSize: this.state.pagination.pageSize,
                        current: pager.current
                    }
                })
            }
        })
    }


    //查询方法
    searchClick() {
        let search = '';
        let params = this.state.searchParam;
        if (params.reasonDesc) {
            search ? search += "" : search = "";
            search += 'reasonDesc=like='+params.reasonDesc+';';
        }
        if (params.type) {
            search ? search += "" : search = "";
            search += 'type='+params.type+';';
        }
        this.state.search = search;
        this.fetch(this.state.pagStart);
    }

    render() {
        return (
            <Card title={this.state.title} className="user">
                <Form layout="inline" style={{marginBottom:'20px'}}>
                    <Form.Item label={'原因描述：'}>
                        <Input placeholder="原因描述"
                               onChange={(e)=>{
                                   console.log(e.target.value);
                                   this.state.searchParam.reasonDesc = e.target.value
                               }}
                        />
                        <Form.Item  style={{marginBottom:'20px'}} layout="inline" label={'类型：'}>
                            <Select placeholder={"请选择类型"}
                                    style={{width:'200px'}}
                                    value={this.state.searchParam.type}
                                    onChange={(e)=>{
                                        this.state.searchParam.type = e;
                                        this.forceUpdate();
                                    }}
                            >
                                {Object.keys(this.state.typeList).map((item, i) => {
                                    return (
                                        <Option key={i} value={item}>{this.state.typeList[item]}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                    </Form.Item>
                    <Form.Item>
                        <Button
                            type="primary"
                            icon="search"
                            onClick={()=>{
                                this.searchClick();
                            }}
                        >搜索</Button>
                    </Form.Item>
                </Form>
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    loading={this.state.loading}
                    dataSource={this.state.tableList}
                    columns={[
                        {title:"原因", align:'center', dataIndex: 'reason', key: 'reason'},
                        {title:"原因描述", align:'center', dataIndex: 'reasonDesc', key: 'reasonDesc'},
                        {title:"状态", align:'center', dataIndex: 'status', key: 'status'},
                        {title:"学生ID", align:'center', dataIndex: 'studentId', key: 'studentId'},
                        {title:"目标ID", align:'center', dataIndex: 'targetId', key: 'targetId'},
                        {title:"类型", align:'center', dataIndex: 'type', key: 'type'},
                        {title:"操作", align:'center', dataIndex: 'operation', key: 'operation',
                            render : (text, record) => {
                                return (
                                    <div className='btn-cen-div'>
                                        <a onClick={()=>{
                                            this.props.history.push("/reports/edit/" + record.id);
                                        }}>修改</a>
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确定删除?" onConfirm={() =>{
                                            ReportService.deleteOne(record.id).done(()=>{
                                                this.fetch(this.state.pagination);
                                            })
                                        }}>
                                            <a>删除</a>
                                        </Popconfirm>
                                    </div>
                                )
                            }
                        },
                    ]}
                    pagination={this.state.pagination}
                    onChange={this.fetch.bind(this)}
                />
            </Card>
        )
    }
}